<template>
	<u-navbar class="navbar" :background="background" :title="scroll<slipHeight?title:''" :back-icon-color="color"
		:title-color="color" :border-bottom="borderBottom">
		<view class="user-box">
			<view class="left">
				<view class="flex" v-if="scroll>=slipHeight">
					<u-avatar class="avatar" :src="imageUrl(user.avatar)" @click="jumpUserHome(user)"></u-avatar>
					<view class="name" :style="{color:color}">{{user.name}}</view>
				</view>
			</view>
			<view class="right">
				<view v-if="scroll>=slipHeight&&operation.buttonShow">
					<u-button class="botton" type="primary" :plain="true" size="mini">
						<u-icon class="botton-icon" name="plus" @click="operationButton"></u-icon>
						{{operation.buttonText}}
					</u-button>
				</view>
				<view v-if="operation.iconShow" class="operation" @click="operationIcon">
					<u-icon :name="operation.icon" :color="color" size="48"></u-icon>
				</view>
			</view>
		</view>
	</u-navbar>
</template>

<script>
	export default {
		props: {
			background: {
				type: Object,
				default: () => {
					background: '#fff'
				}
			},
			color: {
				type: String,
				default: '#000'
			},
			title: {
				type: String
			},
			borderBottom: {
				type: Boolean,
				default: true
			},
			user: {
				type: Object,
				default: () => ({})
			},
			operation: {
				type: Object,
				default: () => ({
					iconShow: true,
					icon: 'zhuanfa',
					buttonShow: true,
					buttonText: '关注'
				})
			},
			scroll: {
				type: Number,
				default: 0
			},
			slipHeight: {
				type: Number,
				default: 80
			}
		},
		data() {
			return {}
		},
		methods: {
			operationButton() {
				this.$emit("operationButton")
			},
			operationIcon() {
				this.$emit("operationIcon")
			},
			jumpUserHome() {
				if (this.user.id) {
					uni.navigateTo({
						url: "/pages/platform/user/user-space?uid=" + this.user.id
					})
				}

			},
			imageUrl(itemUrl) {
				return this.handleUrl(itemUrl)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.navbar {

		.user-box {
			flex: 1;
			display: flex;

			.left {
				flex: 1;
				display: flex;

				.avatar {
					padding: 15rpx;
					height: 20rpx;
				}

				.name {
					display: flex;
					align-items: center;
					margin-left: 10rpx;

				}
			}

			.right {
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.botton {
					padding: 20rpx;
					margin-right: 50rpx;

					.botton-icon {
						margin-right: 5rpx;
					}
				}
			}

		}

		.operation {
			margin-right: 20rpx;
		}
	}
</style>